import { useMemo } from 'react'
import { Decimal } from 'decimal.js'
import classNames from 'classnames'
import { Image } from '@tarojs/components'
import styles from './index.module.less'
import { useMovieStore } from '@/common/hox/movieStore'
import { useTicketModeStore } from '@/common/hox/ticketModeStore'
import { TicketModeMap } from '@/utils/enum'

type TicketModeSelectPropsType = {
  className?: string
}

// 用券或组合权益不显示购票模式
function TicketModeSelect(props: TicketModeSelectPropsType) {
  const { className } = props
  const {
    coupon: { selectCoupon },
    schedule: { scheduleSeatInfo, scheduleDetail, issueTicketMode, setIssueTicketMode, specialModeDisabled },
    seat: { seatList },
    combination: { combinationInfo },
  } = useMovieStore(store => [
    store.coupon.selectCoupon,
    store.schedule.scheduleSeatInfo,
    store.schedule.scheduleDetail,
    store.schedule.issueTicketMode,
    store.schedule.setIssueTicketMode,
    store.schedule.specialModeDisabled,
    store.combination.combinationInfo,
    store.seat.seatList,
  ])

  const { ticketModeList } = useTicketModeStore()

  const modeData = useMemo(() => { 
    if (!seatList.length || !scheduleDetail) return 
    // todo 这里需要确保每个票价一致
    const { officialPrice, fastPrice, specialPrice } = seatList[0]

    return [{
      icon: "https://fulu-media.oss-cn-hangzhou.aliyuncs.com/public/icon/material-symbols--lightning-stand-64.png",
      className: styles.green,
      desc: [`${TicketModeMap.get(0)}`, '15分钟内出票'],
      showPrice: fastPrice,
      saving: Decimal.sub(officialPrice, fastPrice).toFixed(2),
      disabled: false,
    }, {
      icon: "https://fulu-media.oss-cn-hangzhou.aliyuncs.com/public/icon/twemoji--ticket-64.png",
      className: styles.red,
      desc: [`${TicketModeMap.get(1)}`, '15～50分钟出票'],
      showPrice: specialPrice,
      saving: Decimal.sub(officialPrice, specialPrice).toFixed(2),
      disabled: specialModeDisabled
    }]
  }, [seatList, scheduleDetail, specialModeDisabled])
  
  if (selectCoupon || combinationInfo || !scheduleSeatInfo || issueTicketMode === undefined || ticketModeList.length < 2) return null
  // if (selectCoupon || combinationInfo || !scheduleSeatInfo || issueTicketMode === undefined || ticketModeList.length < 2) return null
  
  return (
    <div className={classNames(className, styles.ticketMode)}>
      <div className={styles.title}>购票方式</div>
      <div className={styles.modeContent}>
        {ticketModeList.sort((a, b) => b - a).map(item => {
          if (!modeData?.[item]) return null
          const { icon, desc, showPrice, saving, disabled, className } = modeData[item]
          const isSelect = issueTicketMode === item
          const isRecommend = item === 1 
          return (
            <div
              key={item}
              onClick={() => !disabled && setIssueTicketMode(item)}
              className={classNames(styles.modeItem, className, {
                [styles.disabled]: disabled,
                [styles.isSelect]: isSelect,
                [styles.isRecommend]: isRecommend,
              })}
            >
              {item === 1 && <div className={styles.badge}>推荐</div>}
              <div className={styles.infoItem}>
                <Image src={icon} className={styles.typeIcon} />
                <div className={styles.desc}>
                  <div className={styles.tip1}>{ desc[0] }</div>
                  <div className={styles.tip2}>{ desc[1] }</div>
                </div>
              </div>
              <div className={styles.infoItem}>
                <div className={styles.priceWrapper}>
                  <div className={styles.price}>
                  ¥{showPrice}/张
                  </div>
                  <div className={styles.saving}>
                    <span className={styles.tag}>省￥</span>
                    <span>{saving}</span>
                    <span className={styles.tag}>&nbsp;/ 张</span>
                  </div>
                </div>
                <div className={styles.iconRound}></div>
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}

export default TicketModeSelect